<template>
  <div class="bind-phone">
    <nav-bar class="nav-bar-position">绑定手机号</nav-bar>
    <white-space/>
    <white-space :height="30"/>

    <div class="inputs">
      <ul>
        <li>
          <div class="label">
            手机号码
          </div>
          <label>
            <input class="my-input" maxlength="11" placeholder="请输入手机号码" placeholder-class="placeholder" type="number"
                   v-model="phone">
          </label>
        </li>
        <li>
          <div class="label">
            验证码
          </div>
          <label class="input">
            <input class="my-input" placeholder="请输入短信验证码" maxlength="6" placeholder-class="placeholder" type="number"
                   v-model="code">
          </label>

          <div @tap="getCode" class="code">
            {{ restTime < _restTime && restTime > 0 ? restTime + 's': '发送验证码' }}
          </div>
        </li>
      </ul>
    </div>


    <my-button
      :height="100"
      :margin-top="50"
      :width="590"
      @click.native="wxLogin"
    >
      确定
    </my-button>
  </div>
</template>

<script>
  import { mapActions, mapState } from 'vuex'
  import { reqSendMsg, reqWxLogin } from "../../../store/modules/user/actions";
  import { Toast } from "../../../utils/modal";

  export default {
    name: "bind-phone",
    data() {
      return {
        phone: '',
        code: '',

        focus:false,


        restTime: 60,
        _restTime: 60,

        timer: null
      }
    },
    computed: mapState('User', ['open_id']),
    methods: {
      ...mapActions('User', ['reqSendMsg', 'reqWxLogin']),
      async getCode() {
        if (this.timer) {
          return;
          // Toast({
          //   title: this.restTime + 's后重发'
          // })
        }
        this.focus = true;
        const { phone } = this;
        const p = /^1\d{10}$/;
        if (!phone) {
          return Toast({
            title: '请先输入手机号'
          })
        }
        if (!p.test(phone)) {
          return Toast({
            title: '手机号码格式不正确'
          })
        }

        let res = await this.reqSendMsg({ phone });
        if (!res) {
          return
        }
        this.timer = setInterval(() => {
          this.restTime = this.restTime - 1;
          if (this.restTime === -1) {
            clearInterval(this.timer);
            this.timer = null;
            this.restTime = 60
          }
        }, 1000)
      },
      async wxLogin() {
        const { avatarUrl: avatar, nickName: nick_name } = uni.getStorageSync('userInfo');
        const { phone, code, open_id } = this;
        const data = { avatar, nick_name, phone, code, open_id };
        await this.reqWxLogin(data);
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../uni";

  .bind-phone {
    @include bg;
    position: fixed;
    width: 100vw;
    min-height: 100vh;

    .title {
      @include ft(44, #fff, 500);
      padding: upx(260) upx(40) upx(40);
    }

    .inputs {
      width: upx(670);
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 4px 36px 0 rgba(122, 137, 130, 0.14);
      border-radius: upx(32);
      box-sizing: border-box;
      padding: upx(70) upx(40);
      margin: auto;

      li {
        display: flex;
        align-items: center;
        border-bottom: upx(2) solid #EDF2F3;
        margin-bottom: upx(90);
        padding-bottom: upx(36);

        &:last-child {
          margin-bottom: 0;
        }

        .label {
          width: 30%;
          @include ft(32, #9096A3, 500);
        }

        .input {
          flex: 1;
        }
      }

      .my-input {
        @include ft(32, #273C3D, 300)
      }
    }


    .code {
      width: upx(170);
      height: upx(48);
      line-height: upx(48);
      text-align: center;
      border: upx(2) solid $theme-yellow;
      border-radius: upx(48);
      @include ft(28, $theme-yellow, 500)
    }

    .message {
      margin: upx(76) auto upx(24);
      text-align: center;
      @include ft(28, #BBBFC6, 500)
    }
  }
</style>
